<template>
	<view class="plan-container">
		<view style="margin: 16rpx 0;">
			<u-tabs :list="list[Number(planViewData.planKind)]" :is-scroll="false" :current="tabsCurrent" @change="tabsChange" active-color="#444">
			</u-tabs>
		</view>
		<view v-show="tabsCurrent===0">
			<uni-calendar :insert="true" :lunar="true" :selected="selected"  @change="change" :range="false" />
			<view class="popup-bottom">
				<y-seat height="43"></y-seat>
				<view style="margin: 0 43rpx;">
					<plan-today-card :isShowTime="true" :data="planViewData"></plan-today-card>
				</view>
				<view class="content-limit">
					<text class="clock-label-title">提醒时间：</text>
					<text class="clock-label-info">每隔1小时提醒</text>
				</view>
				<view class="change-plan-btn">
					<button type="default" class="changePlanBtn" @click="showChangePlan=!showChangePlan">修改计划</button>
					<!-- <y-button content="修改计划" @click="showChangePlan=!showChangePlan" className="plan-btn"></y-button> -->
				</view>
			</view>
		</view>
		<view v-show="tabsCurrent===1&&!isShowCommom" style="width: 100%;">
			<view v-for="(item,index) in communityList" :key="index">
				<CommunityCard
						:info="item" :isIndex="0"
				></CommunityCard>
			</view> 
		</view>
		<view style="padding: 29rpx 43rpx;">
			<community-message></community-message>
		</view>
		<u-popup v-model="showChangePlan" mode="bottom" :mask="false" border-radius="65">
			<plan-change-card @sendData="sendData" :data="planViewData"></plan-change-card>
		</u-popup>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	import {Community} from "../../model/community.js";
	import CommunityCard from '../../components/community-card/index.vue';
	import {Plan} from '../../model/plan.js'
	let dayjs = require('dayjs')
	export default {
		data() {
			return {
				showCalendar: false,
				showChangePlan: false,
				list:[
					[{
						name: '个人计划'
					}, {
						name: '计划动态'
					}],
					[{
						name: '共同计划'
					}, {
						name: '计划动态'
					}],
					[{
						name: '朋友计划'
					}, {
						name: '计划动态'
					}
					]
				],
				tabsCurrent: 0,
				planList:[],
				communityList:[],
				communityObject:"",
				info: {
					lunar: true,
					range: true,
					insert: false,
				},
				selected: [
				]
			};
		},
		async onLoad() {
			// uni.showLoading({
			// 	title:"加载中"
			// })
		

		},
		computed: {
			...mapState(['planViewData']),
			isShowCommom(){
				try{
					const res = (this.list[Number(this.planViewData.planKind)][0].name)==='共同计划';
					return res;
				}catch(e){
					return false;
				}
			}
		},
		components:{CommunityCard},
		mounted() {
			this.initList();
			console.log()
		},
		methods: {
			async initList() {
				const that = this;
				Plan.getPlanRecords().then(res=>{
					that.selected=res;
				});
				
				//初始化最新首页数据
				var paging = await Community.getPlanContent();
				var data = await paging.getMoreData();
				if (!data.moreData) {
					this.status = 'nomore';
				}
				this.communityList = this.communityList.concat(data.items);
				this.communityObject = paging;
				console.log(this.communityList)
			},
			sendData(e){
				console.log(e);
				uni.showToast({
					title:"提交成功"
				})
				this.showChangePlan=false;
			},
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
			},
			tabsChange(e) {
				this.tabsCurrent = e;
				console.log(e)
			},
			clickChangePlan() {
				console.log('修改计划')
			},
			change(e) {
				console.log('change 返回:', e);
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return;
				// this.info.selected.push({
				// 	date: e.fulldate,
				// 	info: '打卡'
				// });
			}
		},
		onReady() {}
	};
</script>

<style lang="scss">
	.plan-container {
		width: 100%;
	}

	.content-limit {
		margin: 30rpx 43rpx 10rpx 43rpx;
	}

	.change-plan-btn {
		width: 100%;
		margin-top: 30rpx;
		padding-bottom: 30rpx;

	}
	
	.changePlanBtn {
		background-color: #fff !important;
		color: #6D39E9 !important;
		box-shadow: none !important;
		border: 2rpx solid #6d39e9 !important;
		border-radius: 53rpx;
		width: 377rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 29rpx;
		margin: 0 auto;
	}

	.clock-label-title {
		font-size: 29rpx;
		font-weight: 500;
		color: #35358d;
	}

	.clock-label-info {
		font-size: 22rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.60);
	}

	.popup-bottom {
		position: relative;
		top: -40rpx;
		width: 100%;
		border-radius: 50rpx 50rpx 0 0;
		background: #ffffff;
		border-radius: 72rpx 72rpx 0rpx 0rpx;
	}


	.clock-title {
		font-size: 35rpx;
		font-weight: 500;
		text-align: LEFT;
		color: #35358d;
		margin: 7rpx 0;
	}

	.change-plan-limit {
		padding: 63rpx 42rpx;
	}
	.plan-option{
		margin: 43rpx;
	}
	.plan-option-change{
		display: flex;
		
	}
	.plan-option-change-btn{
		width: 373rpx;
		padding: 29rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.plan-option-line{
		width: 2rpx;
		height: 80rpx;
		background: rgba(0,0,0,0.15);
	}

</style>
